var num;
start()

function start() {
    //载入加载
    $('.main_contener tbody').ready(function () {
        paging();
        del();
        redact();
        btnBigChange();
        $('#inquire').click(inquire);
        $('#btnReset').click(reset);
    });
}



//大按钮背景更改
function btnBigChange() {
    $('.btnBig').mouseover(function () {
        this.style.opacity = '.8';
    });
    $('.btnBig').mouseout(function () {
        this.style.opacity = '1';
    });
}
//小按钮背景更改
function btnSmallChange() {
    $('.btnSmall').mouseover(function () {
        this.style.opacity = '.8';
    })
    $('.btnSmall').mouseout(function () {
        this.style.opacity = '1';
    })
}

//删除
function del() {
    $('tbody tr  div:nth-child(2)').click
        (function () {
            //删除tbody内的tr
            $(this).parent().parent().parent().remove();
            //删除数组内的元素
            let delId = Number($(this).parent().parent().prev().prev().prev().prev()[0].innerText);
            for (let i = 0; i < place.length; i++) {
                if (delId == place[i].id) {
                    place.splice(i, 1);
                }
            }
            // console.log(place);
        })
}



//添加按钮事件
$('#btnAdd').click(function () {
    // console.log(1);
    // $('#popup').css('display', 'block');
    $("#popup").show();
    $('#popup').animate({
        top: '100px',
    }, 500)

    document.getElementById('selects1').value = '全部主体';
    document.getElementById('remark').value = '';
    document.getElementById('introduce').value = '';
    $('#BtnSubmit').click(btnSubmit);
})

//添加提交按钮
function btnSubmit() {
    let PrincipalName = document.getElementById('selects1').value;
    let remark = document.getElementById('remark').value;
    let RegionName = document.getElementById('RegionName').value;

    //Alert
    layer.alert('提交成功！')
    place.push({ id: place.length + 1, PrincipalName, remark,RegionName });
    // $('#popup').css('display', 'none');
    $("#popup").animate({
        top: "500px",
    },
        500)
    $("#popup").fadeOut(500);

    reset()//
}

// 编辑按钮
function redact() {
    $('tbody tr div div:nth-child(1)').click(function () {
        // id: 1, PrincipalName: '原生广场', displayStatus: '显示', remark: '无备注', RegionName: 'A区' 
        let id = $(this).parent().parent().prev().prev().prev().prev()[0].innerText;
        //获取当前按钮id
        for (let i = 0; i < place.length; i++) {
            if (place[i].id == id) {
                num = i;
                break;
            }
        }
        // $('#popup2').css('display', 'block');
        $("#popup2").show();
        $('#popup2').animate({
            top: '100px',
        }, 500)

        $('#popup2 .header_right')[0].innerText = '详情'
        //获取数据当前id
        // let PrincipalName = document.getElementById('PrincipalName').value;
        // let remark = document.getElementById('remark').value;
        // let introduce = document.getElementById('introduce').value;
        // let show = document.getElementById('show').checked;
        // let unshow = document.getElementById('unshow').checked;
        document.getElementById('selects2').value = place[num].PrincipalName;
        document.getElementById('remark2').value = place[num].remark;
        document.getElementById('RegionName2').value = place[num].RegionName;
        btnS2= document.getElementById('BtnSubmit2');
        btnS2.onclick =function(){
            btnSubmitTwo(num);
        } 
    })

}

//编辑提交
function btnSubmitTwo(num) {
    let PrincipalName = document.getElementById('selects2').value;
    let remark = document.getElementById('remark2').value;
    let RegionName = document.getElementById('RegionName').value;
    // $('#popup2').css('display', 'none');
    $("#popup2").animate({
        top: "500px",
    },
        500)
    $("#popup2").fadeOut(500);
    place.splice(num,1,{id:num+1, PrincipalName,remark ,RegionName});
    layer.alert('提交成功！')
    reset()//

}

//查询按钮
function inquire() {
    // { id: 1, PrincipalName: '原生广场', displayStatus: '显示', remark: '无备注', RegionName: 'A区' },
    let SubjectName = $('#SubjectName').val();//输入框
    let selects = document.getElementById('selects').value;//选择框
    let tbody = $('tbody')[0];
    if (SubjectName == "") {
        //Alert
        layer.alert('请输入主体名称');
        return;
    }
    document.querySelector('tbody').innerHTML = '';
    if (selects == '全部主体') {
        for (let i = 0; i < place.length; i++) {
            if (place[i].RegionName == SubjectName) {
                let tr = '<tr><td>' + (place[i].id) + '</td><td>' + (place[i].PrincipalName) + '</td><td>' + (place[i].RegionName) + '</td><td>' + (place[i].remark) + '</td><td><div class="displayFlex_left " id = "btnSmallSum"><div class="btnSmall" id = "btnredact">编辑</div><div class="btnSmall bgCRed" >删除</div></div></td></tr>';
                // console.log(place[i].id);
                $('.main_contener tbody').append(tr);;
            }
        }
    } else {
        for (let i = 0; i < place.length; i++) {
            if (place[i].RegionName == SubjectName && place[i].PrincipalName == selects) {
                let tr = '<tr><td>' + (place[i].id) + '</td><td>' + (place[i].PrincipalName) + '</td><td>' + (place[i].RegionName) + '</td><td>' + (place[i].remark) + '</td><td><div class="displayFlex_left " id = "btnSmallSum"><div class="btnSmall" id = "btnredact">编辑</div><div class="btnSmall bgCRed" >删除</div></div></td></tr>';
                // console.log(place[i].id);
                $('.main_contener tbody').append(tr);;
            }
        }
    }

}

//重置
function reset() {
    document.getElementById('SubjectName').value = '';//输入框
    document.getElementById('selects').value = '全部主体';//选择框
    onloude(0, 5);//初始页面信息，第一页
    // console.log(123)
    start()
}

//分页
function paging() {
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let serialNumber = place.length;//序号
    onloude(0, 5);//初始页面信息，第一页
    $("#inputPage").val(page);//页码
    $("#spanSerialNumber").text(serialNumber);//数据条数

    // 下一页
    $("#nextpage").click(function () {
        if (no + 5 < serialNumber) {//如果no+5小于数据条数
            no += 5;
            page++;
            $("#inputPage").val(page);
            if (serialNumber >= (no + 5)) {//从新加载页面
                onloude(no, no + 5);
            } else (
                onloude(no, serialNumber)

            )
        }
        del()
        $('#btnAdd').click(function () {
            console.log(1);
            $('.popup').css('display', 'block');
            $('#BtnSubmit').click(btnSubmit);
            
        })
        redact()
    });

    // 上一页
    $("#lastpage").click(function () {
        if (no - 5 >= 0) {
            no -= 5;
            page--;
            $("#inputPage").val(page);
            onloude(no, no + 5);
        }
        del()
        $('#btnAdd').click(function () {
            console.log(1);
            $('.popup').css('display', 'block');
            $('#BtnSubmit').click(btnSubmit);
            
        })
        redact()
    });
}
//加载所有数据
// onloude(0,5)
function onloude(n, a) {
    document.querySelector('tbody').innerHTML = '';
    for (let i = n; i < a; i++) {
        let tr = '<tr><td>' + (place[i].id) + '</td><td>' + (place[i].PrincipalName) + '</td><td>' + (place[i].RegionName) + '</td><td>' + (place[i].remark) + '</td><td><div class="displayFlex_left " id = "btnSmallSum"><div class="btnSmall" id = "btnredact">编辑</div><div class="btnSmall bgCRed" >删除</div></div></td></tr>';
        // console.log(place[i].id);
        $('.main_contener tbody').append(tr);
    }
    btnSmallChange();

}


$('.header_btn').click(function(){
    $("#popup").animate({
        top: "500px",
    },
        500)
    $("#popup").fadeOut(500);
    $("#popup2").animate({
        top: "500px",
    },
        500)
    $("#popup2").fadeOut(500);
})
